<template>
  <div style="background-color: #B3C0D1">
  <el-row :gutter="20">
    <el-col :span="16">
      <div>
        <el-card class="box-card">
          <span><b style="font-size: 25px;">招考公告</b></span>
          <el-link style="float:right;color: red" @click="noticeChange()">查看更多</el-link>
          <div v-for="index in notices" :key="index" class="text item" style="margin-top: 5px;">

              <el-link style="font-size: 18px;" type="info" @click="showDetail(index.id)">{{index.title}}</el-link><span style="float: right;">
              	
             {{index.beginDate}} - {{index.endDate}}</span> 

			
          </div>
        </el-card>
        <!--  公告详情对话框-->
        <el-dialog  title="报考公告详情" :visible.sync="noticeDia">
          <el-descriptions title="用户信息">
            <el-descriptions-item label="标题">{{this.noticedetail.name}}</el-descriptions-item>
            <el-descriptions-item label="内容">{{ this.noticedetail.details }}</el-descriptions-item>
          </el-descriptions>
          <div slot="footer" class="dialog-footer">
            <el-button @click="noticeDia=false">取 消</el-button>
            <el-button type="primary" @click="noticeDia = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-col>
    <el-col :span="8" style="">
      <div  id="background">
<el-button type="primary" style="height: 40px;margin-top: 30px;margin-left: 30px" @click="$router.push('/baoming')" round>考生报名入口</el-button>  <br>


<el-button type="primary" style="height: 40px;margin-top: 30px;margin-left: 30px"  @click="bishiFormVisible=true" round>笔试成绩查询</el-button> <br>
        <el-dialog title="笔试成绩查询" :visible.sync="bishiFormVisible">
          <el-form :model="cjForm" :rules="rules" ref="cjRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="考生号" prop="ksh">
              <el-input style="width: 60%" v-model="cjForm.ksh"></el-input>
            </el-form-item>
            <el-form-item label="考生姓名" prop="ksName">
              <el-input style="width: 60%" v-model="cjForm.ksName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="ksSFZ">
              <el-input style="width: 60%" v-model="cjForm.ksSFZ"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="bishiFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="bsQuery">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="笔试成绩" :visible.sync="cjDia">
          <el-descriptions>
            <el-descriptions-item label="姓名">{{cjForm.ksName}}</el-descriptions-item>
            <el-descriptions-item label="笔试成绩">{{score}}</el-descriptions-item>
          </el-descriptions>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cjDia = false">取 消</el-button>
            <el-button type="primary" @click="cjDia = false">确 定</el-button>
          </div>
        </el-dialog>
          <div style="margin-top: 20px">
            <span style="color: black;font-size: 25px;">相关下载</span><br>
            <el-button type="success" @click="downloads('准考证.jpg')" style="height: 40px;margin-top: 10px;margin-left: 30px" plain>准考证下载</el-button>  <br>
            <el-button type="success" @click="downloads('job.xlsx')" style="height: 40px;margin-top: 10px;margin-left: 30px" plain>岗位表下载</el-button> <br>
<!--            <el-button type="success" @click="downloads()" style="height: 40px;margin-top: 10px;margin-left: 30px" plain>下载3</el-button> <br> -->
          </div>
      </div>
     
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="16">
      <div>
        <el-card class="box-card">
          <span>常见问题
            <el-link style="margin-left: 500px" type="danger" @click="proChange(1)">专业问题</el-link>
            <el-link style="margin-left: 5px" type="danger" @click="proChange(2)">报考问题</el-link>
            <el-link style="margin-left: 5px" type="danger" @click="proChange(3)">政策问答</el-link></span>
          <div>
            <router-view></router-view>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="8" >
      <span style="font-size: 25px;color: red">咨询电话</span>
      <div style="margin-top: 30px;margin-left: 50px">
        <span style="font-size: 20px;color: red;">政策咨询电话</span> <br>
        <span style="font-size: 17px;color: #333333">010-12370</span>  <br>
        <span style="font-size: 17px;color: #333333">咨询时间</span>  <br>
        <span style="font-size: 17px;color: #333333">每日8:00-18:00</span>  <br>
      </div>
      <div style="margin-top: 60px;margin-left: 50px">
        <span style="font-size: 20px;color: red">技术咨询电话</span>  <br>
        <span style="font-size: 17px;color: #333333">010-84201264</span>  <br>
        <span style="font-size: 17px;color: #333333">咨询时间</span>  <br>
        <span style="font-size: 17px;color: #333333">每日8:30-17:30</span>  <br>
      </div>
      <div style="margin-top: 60px;margin-left: 50px">
        <span style="font-size: 20px;color: red">考务咨询电话</span> <br>
        <span style="font-size: 17px;color: #333333">010－87901866</span>  <br>
        <span style="font-size: 17px;color: #333333">咨询时间</span>  <br>
        <span style="font-size: 17px;color: #333333">每日8:30-17:00</span>  <br>
      </div>
    </el-col>
  </el-row>
  </div>


</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
	//保存成绩查询信息
	cjForm:{
		ksh:'',
		ksName:'',
		ksSFZ:''
		      },
	 //成绩查询结果对话框
	cjDia:false,
	//保存查询到的成绩
		score:'',
      //查询条件信息
      queryinfo:{
        pageNum:1,
        pageSize:10
      },
      //保存所有公告
      notices:[],
      //保存单个公告信息
      noticedetail:{
        name:'',
        details:''
      },
      //公告详情对话框
      noticeDia:false,
      ruleForm:{
        ksid:'',
        ksname:'',
        kssfz:''
      },
      rules: {
        ksName: [
          {required: true, message: '请输入考生姓名', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        ksh: [
          {required: true, message: '请输入考生号', trigger: 'blur'},
          {min: 16, max: 16, message: '长度为16个字符', trigger: 'blur'}
        ],
        ksSFZ:[
          {required: true, message: '请输入考生身份证号', trigger: 'blur'},
          {min: 18, max: 18, message: '长度为18个字符', trigger: 'blur'}
        ]
      },
      bmFormVisible: false,
      jiaofeiFormVisible: false,
      bishiFormVisible: false,
      mianshiFormVisible: false,
      bsFormVisible:false,
      msFormVisible:false,
      formLabelWidth: '120px',
      //保存不同类别的问题
      levelProblem:[] ,
      //保存单个问题信息
      problemDetail:{
        name:'',
        details:''
      } ,
    };
  },
  methods:{
    //缴费取消
    jfQuXiao(){
       this.jiaofeiFormVisible = false;
       this.ruleForm = "";
    },
    //考生缴费确定
    jfInsert() {
      this.$refs.jfref.validate(async (bo) => {
        if (bo) {
          let res = await this.$http.post('addManager');
          // 处理返回值信息，并给出不同的信息提示
          if (res.data.code == 200) { // 添加成功
            this.$message.success(res.data.message);
            this.jiaofeiFormVisible = false
          } else {
            this.$message.error(res.data.message);
          }
        } else {
          this.$message.error('格式不合法');
        }
      })
    },
  //笔试成绩查询
      async bsQuery(){
        this.$refs.cjRef.validate(async (bo) => {
              if (bo) {
        let res = await this.$http.get('grades/selectByExamId?examid='+this.cjForm.ksh);
        if (res.data.code == 200) { // 查询成功
          this.$message.success(res.data.message);
		  this.score = res.data.data.grade;
		  this.cjDia = true;
        } else {
          this.$message.error(res.data.message);
        }
        } else {
                this.$message.error('格式不合法');
         }
        })
      } ,
    //跳转到公告
    noticeChange(){
      this.$router.push("/notice")
    },
    async queryNotices(){
      //查询公告
      let res = await this.$http.post('/selectAllAffiche',qs.stringify(this.queryinfo));
      // 处理返回值信息，并给出不同的信息提示
      if (res.data.code == 200) { // 查询成功
        this.$message.success(res.data.message);
        this.notices = res.data.data.records;
		// console.log(res.data.data.records)
		// console.log(this.notices)
        this.total = res.data.data.total;
      } else {
        this.$message.error(res.data.message);
      }
    },
    //点击文字连接，显示详情
    async showDetail(id){
      this.noticeDia = true;
      let res = await this.$http.post('selectAfficheByID?id='+id);
      if (res.data.code == 200) { // 查询成功
        this.$message.success(res.data.message);
        this.noticedetail.name = res.data.data.title;
        this.noticedetail.details = res.data.data.message;  //TODO
      } else {
        this.$message.error(res.data.message);
      }
    },
async downloads(name){
             this.$confirm('确定下载该文件到桌面吗?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
             }, ).then(async (res) => {
               await this.$http.get('download?filename='+name);
			   this.$message.success("成功")
             }).catch(() => {
               this.$message({
                 type: 'info',
                 message: '已取消下载'
               });
             });
           },
	//
    //问题跳转
    proChange (id){
      this.$router.push({
        path: "/test",
        query: {
          classId: id,
        },
      });
    }
  },
  mounted(){
        this.queryNotices();
		
  }
}
</script>

<style scoped>
       .box-card{
         width: 100%;
         /* height: 480px; */
         background-color: azure;
       }
       #background{
         width: 100%;
         background: url("../img/1.webp");
         background-size: cover;
       }


</style>